
<script setup>
import { reactive } from 'vue';
const dragNums = reactive({
  leftBarWidth: 60,
  startX: 0,
  lastX: 60
})
const mouseDown = (e) => {
  dragNums.startX = e.clientX
    mouseMove(e)
    mouseUp()
    document.addEventListener('mousemove', mouseMove,  { passive: false })
    document.addEventListener('mouseup', mouseUp,  { passive: false })
  }

const mouseUp = () => {
  dragNums.leftBarWidth = dragNums.lastX
  document.removeEventListener('mousemove', mouseMove,  { passive: false })
  document.removeEventListener('mouseup', mouseUp,  { passive: false })
}

const mouseMove = (e) => {
  e.preventDefault()
  e.stopPropagation()
  const offset = e.clientX - dragNums.startX
  if (offset !== 0) {
    dragNums.lastX = offset + dragNums.leftBarWidth
  }
}
</script>
<template>
<div class="page-view">
  <div class="top-bar">这是其他的数据</div>
  <div class="out-box">
    <div class="left-box" :style="{ width: `${dragNums.lastX}px`}">
      <div class="x-resizer" @mousedown="mouseDown">⋮</div>
    </div>
    <div class="right-box"></div>
  </div>   
</div>   
</template>

<style lang="scss" scoped>
.page-view {
  height: calc(100vh - 40px);
  .top-bar {
    height: 40px;
    background-color: #666666;
  }
  .out-box{
    display:flex;
    height: calc(100vh - 80px);
   .left-box {
      min-width: 0px;
      max-width: 50%;
      background: #b4d2ef;
      position: relative;
      .x-resizer {
        position: absolute;
        top: 50%;
        right: -11px;
        z-index: 1;
        height: 40px;
        margin-top: -25px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        cursor: col-resize;
        text-align: center;
        line-height: 40px;
        background-color: #c5c1c1;
        width: 10px;
        z-index: 1;
      }
    }
    .right-box {
      flex: 1;
      background: #aced;
      margin-left: 1px;
      position: relative;
    }
  }
}
</style>